<template>
    <div class="homePage">
        <header>今日数据</header>
        <el-main class="main">
            <div class="navCard">
                <div class="card" v-for="(item, index) in cardList" :key="index">
                    <span class="num">{{item.num}}</span>
                    <span class="name">{{item.name}}</span>
                    <i
                        class="iconfont"
                        :class="item.icon"
                        :style="{
                        'color': item.color
                    }"
                    ></i>
                </div>
            </div>
            <!--<div class="data_picker">-->
                <!--<span class="demonstration">筛选订单：</span>-->
                <!--<el-date-picker-->
                    <!--v-model="value2"-->
                    <!--type="datetimerange"-->
                    <!--:picker-options="pickerOptions"-->
                    <!--range-separator="至"-->
                    <!--start-placeholder="开始日期"-->
                    <!--end-placeholder="结束日期"-->
                    <!--align="right"-->
                <!--&gt;</el-date-picker>-->
            <!--</div>-->
            <!--<div class="select_cont">-->
                <!--<p class="noSelected sub-title">当前筛选结果</p>-->
                <!--<p class="sub-title">-->
                    <!--<span class="selName myli">美白美白美白美白美白</span>-->
                    <!--<span class="selId">ID:3220</span>-->
                    <!--<span class="selNum">5</span>-->
                <!--</p>-->
            <!--</div>-->
        </el-main>
    </div>
</template>

<script>
import Service from "../../services/main";
export default {
    name: "Home",
    data() {
        return {
            orderAddNum: "",
            orderOut: "",
            orderTotalNum: "",
            proAddNum: "",
            proTotalNum: "",
            cardList: [
                {
                    num: 0,
                    name: "今日新增产品",
                    icon: "iconxinzengchanpin",
                    color: "rgb(0, 0, 255)"
                },
                {
                    num: 0,
                    name: "今日新增订单",
                    icon: "iconxinzengdingdan",
                    color: "rgb(255, 90, 95);"
                },
                {
                    num: 0,
                    name: "丢单",
                    icon: "icondiudan",
                    color: "rgb(102, 177, 25)"
                },
                {
                    num: 0,
                    name: "所有产品",
                    icon: "iconproduct",
                    color: "rgb(204, 204, 204)"
                },
                {
                    num: 0,
                    name: "所有订单",
                    icon: "iconsuoyoudingdan",
                    color: "rgb(204, 204, 204)"
                }
            ],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            value1: [
                new Date(2000, 10, 10, 10, 10),
                new Date(2000, 10, 11, 10, 10)
            ],
            value2: ""
        };
    },
    created() {
        this.getHomeData();
    },
    methods: {
        getHomeData() {
            Service.homeData(this).then(res => {
                this.cardList[1].num = res.result.orderAddNum;
                this.cardList[2].num = res.result.orderOut;
                this.cardList[4].num = res.result.orderTotalNum;
                this.cardList[0].num = res.result.proAddNum;
                this.cardList[3].num = res.result.proTotalNum;
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.homePage {
    color: #000;
    padding: 30px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
header {
    font-weight: 700;
    font-size: 12px;
    height: 25px;
    padding-left: 30px;
}
.main {
    flex: 1;
}
.navCard {
    width: 100%;
    height: 90px;
    border: 1px solid #f1f1f1;
    border-right: 0;
    display: flex;
}
.card {
    width: 20%;
    border-right: 1px solid #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
.card .num {
    font-family: neo sans;
    font-weight: 700;
    font-size: 20px;
    color: #666;
}
.card .name {
    font-size: 14px;
    font-weight: 700;
    margin: 0 auto 23px;
    color: #aaa;
}
.card i {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
}
.data_picker {
    margin: 20px;
}
.demonstration {
    font-weight: 700;
    font-size: 12px;
    height: 25px;
    margin-right: 10px;
}
.select_cont {
    padding-left: 20px;
}
.sub-title {
    font-weight: 700;
    font-size: 12px;
    margin: 25px 0 20px;
}
.noSelected {
    color: red;
}
.myli {
    margin: 20px 0;
    font-size: 13px;
    color: #666666;
}
.selId {
    color: blue;
    margin-left: 10px;
}
.selNum {
    color: red;
    margin-left: 10px;
}
</style>
